@import 'shared.scss';
@import 'drop-menus.scss';

:local(.settings-menu-overlay-wrap) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--panel-overlay-background-color);
}

:local(.settings-menu-overlay) {
  :local(.contents) {
    position: relative;
    min-width: auto;
    padding: 24px 72px;
    padding-bottom: 12px;
  }
}

:local(.settings-menu-drop) {
  @extend %drop-menu;
  left: 16px;
}

:local(.attach-point) {
  @extend %attach-point;
  top: -5px;
  left: 16px;
}

:local(.close-button) {
  @extend %panel-widget;

  position: absolute;
  left: 18px;
  top: 18px;
  font-size: 1.6em;
  font-weight: bold;
  border: none;
}

:local(.settings-row) {
  justify-content: flex-start;
}

:local(.icon) {
  width: 18px;
  height: 18px;
  position: relative;
  margin: 0px 18px 0px 10px;
  font-size: 1.1em;
  color: var(--panel-icon-color);

  img {
    position: absolute;
    width: 18px;
    height: 18px;
  }

  // Hack for fontawesome icons, because other images are sqauare
  i {
    position: absolute;
    top: -3px;
  }
}

:local(.secondary-link-item) {
  margin: 0;
}

:local(.secondary-button) {
  @extend %action-button-secondary-modal;
}

:local(.bottom-links-main) {
  font-size: 0.8em;
  border-top: 1px solid var(--panel-rule-color);
  border-bottom: 1px solid var(--panel-rule-color);
  margin-top: 12px;
  display: grid;
  grid-template-columns: 33% 33% 33%;
  padding-top: 12px;
  padding-bottom: 12px;
  font-weight: normal;
  justify-items: center;
  width: 90%;

  button, a {
    color: var(--panel-text-color);
    margin: 2px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    font-weight: bold;
    text-decoration-color: var(--panel-link-underline-color);
  }

  button {
    @extend %default-font;
    @extend %link-button;
    font-weight: bold;
    text-decoration-color: var(--panel-subtitle-color);
    padding: 0;
    justify-content: center;
    text-align: center;
  }
}

:local(.bottom-links) {
  font-size: 0.8em;
  display: grid;
  grid-template-columns: 33% 33% 33%;
  padding-top: 12px;
  font-weight: normal;
  min-width: 300px;

  a, button {
    color: var(--panel-subtitle-color);
    margin: 2px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
  }

  button {
    @extend %default-font;
    @extend %link-button;
    font-weight: normal;
    text-decoration-color: var(--panel-subtitle-color);
    padding: 0;
    justify-content: center;
    text-align: center;
  }
}
